<template>
  <div>
    <Header :left="false" title="ant/f2图表"/>
    <div style="margin-top:50px">
      <canvas id="myChart" height="350"></canvas>
    </div>
  </div>
</template>
<script>
import { Icon, Button, CellGroup, Cell } from "vant";
import F2 from "@antv/f2";
import Header from "@/components/header.vue";
export default {
  name: "tab2",
  components: { Button, Header, Icon, CellGroup, Cell },
  data() {
    return {
      data: [
        { genre: "Sports", sold: 295 },
        { genre: "Strategy", sold: 115 },
        { genre: "Action", sold: 120 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 }
      ]
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // Step 1: 创建 Chart 对象
      const chart = new F2.Chart({
        id: "myChart",
        pixelRatio: window.devicePixelRatio // 指定分辨率
      });
      // Step 2: 载入数据源
      chart.source(this.data);
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart
        .interval()
        .position("genre*sold")
        .color("genre");

      // Step 4: 渲染图表
      chart.render();
    }
  }
};
</script>
<style scoped>
.pic {
  width: 100%;
  text-align: center;
}
</style>


